<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>认证详情</span></div>
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="姓名">{{ form.name }}</el-form-item>
        <el-form-item label="性别" prop="sex">{{ form.sex }}</el-form-item>
        <el-form-item label="出生年月日">{{ form.birthday }}</el-form-item>
        <el-form-item label="籍贯">{{ form.native_place }}</el-form-item>
        <el-form-item label="民族">{{ form.nation }}</el-form-item>
        <el-form-item label="政治面貌">{{ form.political_outlook }}</el-form-item>
        <el-form-item label="学历">{{ form.education }}</el-form-item>
        <el-form-item label="身份证号码">{{ form.id_number }}</el-form-item>
        <el-form-item label="毕业院校">{{ form.school }}</el-form-item>
        <el-form-item label="专业">{{ form.major }}</el-form-item>
        <el-form-item label="入会推荐人">{{ form.recommender }}</el-form-item>
        <el-form-item label="头像">
          <el-image :src="form['avatar']?ImageUrl+form['avatar']:''" :preview-src-list="[form['avatar']?ImageUrl+form['avatar']:'']" style="width:160px;height: 160px;"/>
        </el-form-item>
        <el-form-item label="企业名称">{{ form.enterprise_name }}</el-form-item>
        <el-form-item label="工作职务">{{ form.position }}</el-form-item>
        <el-form-item label="企业性质">{{ form.nature }}</el-form-item>
        <el-form-item label="企业地址">{{ form.province+form.city+form.area+form.address }}</el-form-item>
        <el-form-item label="是否高新科技企业">{{ form.school }}</el-form-item>
        <el-form-item label="所属行业">{{ form.new_high }}</el-form-item>
        <el-form-item label="邮编">{{ form.zip_code }}</el-form-item>
        <el-form-item label="企业专利">{{ form.patent }}</el-form-item>
        <el-form-item label="手机号码">{{ form.mobile }}</el-form-item>
        <el-form-item label="QQ/微信号">{{ form.wechat }}</el-form-item>
        <el-form-item label="E-mail">{{ form.email }}</el-form-item>
        <el-form-item label="办公电话">{{ form.office_phone }}</el-form-item>
        <el-form-item label="企业网址">{{ form.website }}</el-form-item>
        <el-form-item label="传真">{{ form.fax }}</el-form-item>
        <el-form-item label="企业注册资金">{{ form.registered_capital }}</el-form-item>
        <el-form-item label="员工人数">{{ form.staff_number }}</el-form-item>
        <el-form-item label="上一年度主营业额">{{ form.turnover }}</el-form-item>
        <el-form-item label="上一年度主纳税额">{{ form.tax_amount }}</el-form-item>
        <el-form-item label="工作简介">{{ form.job_brief }}</el-form-item>
        <el-form-item label="企业简介及发展情况">{{ form.company_profile }}</el-form-item>
        <el-form-item label="会员类型">
          <el-select v-model="form['industry_type_id']" :disabled="form.is_vip!=='1'" placeholder="类型" class="select" clearable filterable>
            <el-option v-for="item in MemberTypeList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <div v-if="form.is_vip==='1'" style="text-align:center">
          <el-button type="primary" @click="setStatus(2)">审核通过</el-button>
          <el-button type="danger" @click="setStatus(3)">审核不通过</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ImageUrl: this.$store.getters.serverUrl,
ImageUrl: '',
      // 会员类型列表
      MemberTypeList: [],

      form: {
        id: '',
        name: '',
        sex: '男',
        mobile: '',
        email: '',
        type: '',
        avatar: '',
        level: '',
        position: '',
        company: '',
        qq: '',
        source: '',
        project: '',
        remarks: '',
        certify_name: '',
        certify_no: '',
        create_time: '',
        enterprise_pic: '',
        password: '',
        confirmPass: '',
        status: 1,
        industry_type_id: ''
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.getMemberInfo(this.$route.query.id);
    }
    this.getMemberType();
  },
  methods: {
    /**
       *  获取用户信息
       *  接口:'member/detail/{id}'
       */
    getMemberInfo(id) {
      const url = 'vip/memberVipInfo/' + id;
      this.$store.dispatch('GetConnect', { url }).then(res => {
        Object.assign(this.form, res.data);
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 获取会员类型
    getMemberType() {
      const url = 'vip/typeList'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.MemberTypeList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    setStatus(status) {
      this.$confirm('此操作将' + (status === 2 ? '通过' : '拒绝') + '该认证申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (status === 2) {
          const url = 'vip/examineMemberVip';
          const data = {
            id: this.form.member_id,
            is_vip: status,
            industry_type_id: this.form.industry_type_id
          };
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg);
            this.getMemberInfo(this.form.member_id);
          }).catch(e => {
            this.$message.error(e.msg + ',请刷新或联系管理员');
          })
        } else if (status === 3) {
          const url = 'vip/delInfo';
          const data = {
            member_id: this.form.member_id
          };
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg);
            this.$router.back(-1);
          }).catch(e => {
            this.$message.error(e.msg + ',请刷新或联系管理员');
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }
    .el-form {
      max-width: 900px;
      .title {
        font-weight: 600;
      }
      .remark {
        font-size: 13px;
        color: $textGray;
      }
      .el-button {
        @extend .bg-green;
        width: 20%;
        min-width: 160px;
      }
    }
  }
</style>
